<template>
  <view class="round">
	  <view class="num">
	  	剩余抽奖次数：<text style="color:#FF0000">{{num}}次</text>
	  </view>
    <LuckyWheel
      ref="myLucky"
      width="390rpx"
      height="390rpx"
      :blocks="blocks"
      :prizes="prizes"
      :buttons="buttons"
      :defaultStyle="defaultStyle"
      @start="startCallBack"
      @end="endCallBack"
    />
  </view>
</template>

<script>
  import LuckyWheel from '@lucky-canvas/uni/lucky-wheel'
  export default {
    components: { LuckyWheel },
	props:{
		num:{
			type:Number,
			default:0
		}
	},
    data () {
      return {
        blocks: [{ padding: '13rpx', background: '#ffd789' }],
        prizes: [
          { fonts: [{ text: '奖品', top: '10%', color:'#ff4b00' }], background: '#FFEFE3' },
          { fonts: [{ text: '奖品', top: '10%', color:'#ff4b00' }], background: '#FFFBF4' },
          { fonts: [{ text: '奖品', top: '10%', color:'#ff4b00' }], background: '#FFEFE3' },
          { fonts: [{ text: '奖品', top: '10%', color:'#ff4b00' }], background: '#FFFBF4' },
          { fonts: [{ text: '奖品', top: '10%', color:'#ff4b00' }], background: '#FFEFE3' },
          { fonts: [{ text: '奖品', top: '10%', color:'#ff4b00' }], background: '#FFFBF4' },
        ],
        buttons: [
          { radius: '50rpx', background: '#fab968' },
          { radius: '45rpx', background: '#ff4b00' },
		  { radius: '40rpx', background: '#ffefc9' },
          {
            radius: '35rpx', background: '#ff4b00',
            pointer: true,
            fonts: [{ text: 'GO', top: '-20rpx' }]
          },
        ],
      }
    },
    methods: {
      // 点击抽奖按钮触发回调
      startCallBack () {
		  if(this.num <= 0) return
        // 先开始旋转
        this.$refs.myLucky.play()
        // 使用定时器来模拟请求接口
        setTimeout(() => {
          // 假设后端返回的中奖索引是0
          const index = 0
          // 调用stop停止旋转并传递中奖索引
          this.$refs.myLucky.stop(index)
        }, 3000)
      },
      // 抽奖结束触发回调
      endCallBack (prize) {
        // 奖品详情
        console.log(prize)
      }
    }
  }
</script>
<style lang="scss" scoped>
	.round{
		.num{
			text-align: center;
		}
	}
</style>